<template>
	<view>
		<view class="header flex justify-start align-center">
			<view class="imgOut flex justify-center align-center">
				<image :src="detail.img" class="imgIn" mode="aspectFill"></image>
			</view>
			<view class="rightInfo">
				<view class="bookName">{{detail.name}}</view>
				<view style="color: #666666;font-size: 28rpx;" class="u-m-t-24">{{detail.author}}</view>
				<view class="glayBox flex justify-around align-center">
					<view class="whiteNum">
						<view>9.8</view>
						<text>评分</text>
					</view>
					<view class="whiteNum">
						<view>45.6万</view>
						<text>评价数</text>
					</view>
					<view class="whiteNum">
						<view>45.6万</view>
						<text>借阅书</text>
					</view>
				</view>
			</view>
		</view>
		<view class="u-p-l-32 u-p-r-32 u-m-t-24 btnOut flex justify-start align-center">
			<view class="jieyueBtn flex justify-center align-center u-m-r-24"><up-icon name="download" color="#fff" size="20"></up-icon> 立即借阅</view>
			<view class="collect flex justify-center align-center u-m-r-24"><up-icon name="star" color="#666666" size="20"></up-icon> 收藏</view>
			<view class="collect flex justify-center align-center"><up-icon name="chat" color="#666666" size="20"></up-icon> 评论</view>
		</view>
		<view class="u-p-l-32 u-p-r-32 u-m-t-32">
			<view class="bookContent u-p-32">
				<view class="contentTitle">内容简介</view>
				<view class="contentDesc u-m-t-24">
					文化大革命如火如荼进行的同时，军方探寻外星文
					明的绝秘计划"红岸工程"正在进行。叶文洁在期间
					发出了地球文明的第一声啼鸣，这个信号很快被三
					体文明接收到。地球文明的命运从此改变。三体人
					在利用超技术锁死了地球人的基础科学之后，开始
					了对地球的入侵。人类的末日悄然来临。这是一部
					迄今为止最震撼人心的科幻巨著，比现实更幻想，
					比梦境更真实。它带领读者，浩浩荡荡穿越时空、
					逻辑、想象，感受令人扪心自问的宇宙声音。
				</view>
			</view>
		</view>
		<view class="u-p-l-32 u-p-r-32 u-m-t-32">
			<view class="bookContent u-p-32">
				<view class="contentTitle">图书信息</view>
				<view class="contentDesc u-m-t-24">
					<view class="bookInfo"><text>ISBN</text><text>9787536692930</text></view>
					<view class="bookInfo"><text>出版社</text><text>重庆出版社</text></view>
					<view class="bookInfo"><text>出版日期</text><text>2008-01-01</text></view>
					<view class="bookInfo"><text>页数</text><text>302</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	import {ref, reactive} from 'vue'
	var detail = ref({})
	onLoad((option) => {
		detail.value = JSON.parse(option.info)
		console.log(detail.value)
	})
</script>

<style lang="scss">
	.header{
		height: 346rpx;
		background-color: #fff;
		border-radius: 0 0 40rpx 40rpx;
		padding: 48rpx 32rpx;
		.imgOut{
			width: 240rpx;
			height: 360rpx;
			margin-right: 32rpx;
			background-color: #F9FDFE;
			border-radius: 10rpx;
			.imgIn{
				width: 200rpx;
				height: 300rpx;
			}
		}
		.rightInfo{
			height: 360rpx;
			.bookName{
				color: #333333;
				font-size: 40rpx;
				font-weight: bold;
			}
			.glayBox{
				width: 414rpx;
				height: 138rpx;
				background: #F8F9FA;
				border-radius: 16rpx;
				margin-top: 28rpx;
				.whiteNum{
					view{
						color: #333333;
						font-size: 32rpx;
						font-weight: bold;
					}
					text{
						color: #999999;
						font-size: 24rpx;
					}
				}
			}
		}
	}
	.btnOut{
		background-color: #fff;
		height: 152rpx;
		border-radius: 32rpx;
		.jieyueBtn{
			width: 319rpx;
			height: 88rpx;
			background: #007AFF;
			border-radius: 16rpx;
			color: #FFFFFF;
			font-size: 32rpx;
		}
		.collect{
			width: 160rpx;
			height: 88rpx;
			background: #F5F6F7;
			border-radius: 16rpx;
			color: #666666;
			font-size: 28rpx;
		}
	}
	.bookContent{
		background-color: #fff;
		border-radius: 32rpx;
		.contentTitle{
			color: #333333;
			font-size: 32rpx;
			font-weight: bold;
		}
		.contentDesc{
			color: #666666;
			font-size: 28rpx;
			line-height: 48rpx;
		}
	}
	.bookInfo{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		text:nth-child(1){
			display: block;
			flex: 0 0 150rpx;
			color: #999999;
			font-size: 28rpx;
		}
	}
</style>